<!--/* 搜索 */-->
<script setup lang="js">
import { toRefs, ref, onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import { clone } from 'radash';

const emit = defineEmits(['onFormSubmitHandle', 'onClearForm']);

const props = defineProps({
  // 列数
  columnNumber: {
    type: Number,
    default: 5,
    required: true
  },
  rightBtnWidth: {
    type: String,
    default: '1fr'
  },
  labelWidth: {
    type: String,
    default: null
  },
  // 列间隔
  columnGap: {
    type: String,
    default: '10px'
  },
  // 行间隔
  rowGap: {
    type: String,
    default: '10px'
  },
  // 按钮是否显示
  btnShow: {
    type: Boolean,
    default: true
  },
  // 数据项
  keyInfo: {
    type: Array,
    default() {
      return [
        {
          label: '标题',
          defaultVal: '',
          name: 'name',
          type: 'text',
          size: 'default',
          codeType: 'latestUpdate'
        }
      ];
    }
  }
});

const { columnNumber, columnGap, rowGap, keyInfo, btnShow, rightBtnWidth } =
  toRefs(props);

onMounted(() => {
  inputInfo.value = inputInfoInit();
});

const inputInfo = ref({});

const defaultWidth = ref('100%');

const inputInfoInit = () => {
  let obj = {};
  if (keyInfo.value.length > 0) {
    const arr = clone(keyInfo.value);
    arr.forEach(item => {
      obj[item.name] = item.defaultVal !== undefined ? item.defaultVal : '';
    });
  }
  return obj;
};

function onSubmit() {
  const resObj = clone(inputInfo.value);
  keyInfo.value
    .filter(item => item.type.includes('checkbox'))
    .forEach(item => {
      resObj[item.name] = checkboxList[item.type];
    });

  emit('onFormSubmitHandle', resObj);
}

function clearForm() {
  inputInfo.value = inputInfoInit();
  const resObj = clone(inputInfo.value);
  emit('onClearForm', resObj);
}
</script>

<template>
  <div class="searchOuter">
    <el-form
      ref="inputInfoRef"
      :model="inputInfo"
      class="grid-container"
      :style="{
        gridTemplateColumns: `repeat(${columnNumber - 1},1fr) ${rightBtnWidth}`,
        'grid-column-gap': columnGap,
        gridRowGap: rowGap
      }"
      label-position="right"
      :labelWidth="labelWidth"
    >
      <template v-for="item in keyInfo">
        <!--  输入框  -->
        <el-form-item
          v-if="item.type === 'text'"
          :label="item.label"
          :style="{ width: item.width ?? defaultWidth }"
        >
          <el-input
            v-model="inputInfo[item.name]"
            :size="item.size ? item.size : 'small'"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <!--  下拉选择框  -->
        <el-form-item
          v-if="item.type === 'select'"
          :label="item.label"
          :style="{ width: item.width ?? defaultWidth }"
        >
          <el-select
            v-model="inputInfo[item.name]"
            :size="item.size ? item.size : 'small'"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="ele in item.options"
              :key="ele.value"
              :label="ele.label"
              :value="ele.value"
              :disabled="ele.disabled ?? false"
            />
          </el-select>
        </el-form-item>
        <!--  日期范围选择器  -->
        <el-form-item
          v-if="item.type === 'datePicker'"
          :label="item.label"
          :style="{
            width: item.width ?? defaultWidth
          }"
        >
          <el-date-picker
            v-model="inputInfo[item.name]"
            type="daterange"
            clearable
            :size="item.size ? item.size : 'small'"
            :format="item.format || 'YYYY-MM-DD'"
            :value-format="item.format || 'YYYY-MM-DD'"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
          />
          <!-- :picker-options="pickerOptions" -->
        </el-form-item>
        <!--  月份范围选择器  -->
        <el-form-item
          v-if="item.type === 'datePickerMonth'"
          :label="item.label"
          :style="{
            width: item.width ?? defaultWidth
          }"
        >
          <el-date-picker
            v-model="inputInfo[item.name]"
            type="monthrange"
            clearable
            :size="item.size ? item.size : 'small'"
            :format="item.format || 'YYYY-MM'"
            :value-format="item.format || 'YYYY-MM'"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
          />
          <!-- :picker-options="pickerOptions" -->
        </el-form-item>
        <!--  年份范围选择器  -->
        <el-form-item
          v-if="item.type === 'datePickerYear'"
          :label="item.label"
          :style="{
            width: item.width ?? defaultWidth
          }"
        >
          <el-date-picker
            v-model="inputInfo[item.name]"
            type="yearrange"
            clearable
            :size="item.size ? item.size : 'small'"
            :format="item.format || 'YYYY'"
            :value-format="item.format || 'YYYY'"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
          />
          <!-- :picker-options="pickerOptions" -->
        </el-form-item>
        <!--  某一天选择器  -->
        <el-form-item
          v-if="item.type === 'datePickerDay'"
          :label="item.label"
          :style="{
            width: item.width ?? defaultWidth
          }"
        >
          <el-date-picker
            v-model="inputInfo[item.name]"
            type="date"
            clearable
            :size="item.size ? item.size : 'small'"
            :format="item.format || 'YYYY-MM-DD'"
            :value-format="item.format || 'YYYY-MM-DD'"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
          />
          <!-- :picker-options="pickerOptions" -->
        </el-form-item>
        <!--  日期时间范围选择器  -->
        <el-form-item
          v-if="item.type === 'datePickerTime'"
          :label="item.label"
          :style="{
            width: item.width ?? defaultWidth
          }"
        >
          <el-date-picker
            v-model="inputInfo[item.name]"
            type="datetimerange"
            clearable
            :size="item.size ? item.size : 'small'"
            :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
            :value-format="item.format || 'YYYY-MM-DD HH:mm:ss'"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
          />
          <!--          :picker-options="pickerOptions"-->
        </el-form-item>
        <!--  日期范围选择器  -->
        <el-form-item
          v-if="item.type === 'datePickerTimeDay'"
          :label="item.label"
          :style="{
            width: item.width ?? defaultWidth
          }"
        >
          <el-date-picker
            v-model="inputInfo[item.name]"
            type="datetime"
            clearable
            :size="item.size ? item.size : 'small'"
            :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
            :value-format="item.format || 'YYYY-MM-DD HH:mm:ss'"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
          />
          <!--          :picker-options="pickerOptions"-->
        </el-form-item>
        <el-form-item
          v-if="item.type === 'cascader'"
          :label="item.label"
          :style="{ width: item.width ?? defaultWidth }"
        >
          <el-cascader
            v-model="inputInfo[item.name]"
            :props="item.props"
            :options="item.options"
            clearable
          />
        </el-form-item>
      </template>
      <!--  按钮  -->
      <el-form-item v-if="btnShow" class="button">
        <el-button
          :icon="Edit"
          size="default"
          style="font-size: 14px; color: #1d2129; font-weight: 400; text-align: center"
          @click="clearForm('form')"
          >重置
        </el-button>
        <el-button :icon="Edit" size="default" type="primary" @click="onSubmit()"> 查询 </el-button>
      </el-form-item>
      <el-form-item v-else class="lowerRightCorner">
        <slot />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.searchOuter {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 8px 10px 16px 16px;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  //grid-template-columns: repeat(5, 1fr); /* 5列布局 */
  grid-auto-flow: dense; /* 启用密集填充模式 */
  gap: 10px; /* 网格间隙 */
}

.item {
  min-height: 50px;
  background: #e0e0e0;
  padding: 20px;
}

.button {
  grid-column: v-bind(columnNumber); /* 始终位于最右边 */
  justify-self: end;
}

.lowerRightCorner {
  grid-column: v-bind(columnNumber); /* 始终位于最右边 */
}

.inputItem {
  height: 100%;
  position: relative;
  padding: 8px 10px 16px 16px;
}

.infoBtn {
  position: absolute;
  bottom: 16px;
  right: 40px;
}

.form {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
}

:deep(.el-form-item__label) {
  margin: 0;
  padding: 0 6px 0 6px;
  height: 34px;
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
  //font-size: 13px;
  //color: rgba(0, 0, 0, 0.85);
  //line-height: 22px;
  //font-weight: 600;
  //padding-bottom: 4px;
}

:deep(.el-radio__original) {
  display: none !important;
  /* 隐藏原生 radio 输入，但仍然允许交互 */
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)),
:deep(.el-radio__inner) {
  box-shadow: none !important;
}

::v-deep(.el-date-editor) {
  width: 100%;
}
</style>
